﻿@section header
{
    <link href="~/Themes/RongJi/Style/plugins/jquery-circliful/jquery.circliful.css" rel="stylesheet">
    <link href="~/Themes/RongJi/Style/base/css/details.css" rel="stylesheet">
}

@section title
{
    @Model.Product.Title
}
@model RiderShop.Mobile.Modle.ProductModel
@using RiderShop.Mobile.Common.Component
@using Kevin.Shop.Business.Service.Entity.Products.Enumerations
<div id="equalize">
    <div class="col-left">
        <dl class="details-side">
            <dt>看了又看</dt>
            @*<dd class="no-items">暂无数据</dd>*@
            <dd>
                <ul>
                    @foreach (var hot in RiderShop.Mobile.Modle.Product.ProductListModel.GetHotProducts(10))
                    {
                        <li>
                            <div><a href="/Product/ProductDetail?prd=@hot.ProductId"><img src="@hot.ImageNameSize125" alt="@hot.Title"></a></div>
                            <a href="/Product/ProductDetail?prd=@hot.ProductId">@(hot.Title.Length > 35 ? hot.Title.Substring(0, 35) : hot.Title)<span>@(hot.Title.Length > 15 ? hot.Title.Substring(0, 15) : hot.Title)</span></a>
                            <p class="price">现价:￥@hot.UnitPriceFormat</p>
                        </li>
                    }

                </ul>
            </dd>
        </dl>
        @*<dl class="details-side">
                <dt>买了又买</dt>
                <dd class="no-items">暂无数据</dd>
                <dd>
                    <ul>
                        <li>
                            <div><a href=""><img src="http://dev.rongji365.com/Storage/PrdImage/ProductImage/102/10240002001/p180/130622573396734143.jpg" alt=""></a></div>
                            <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                            <p class="price">现价:￥11.00</p>
                        </li>
                        <li>
                            <div><a href=""><img src="http://dev.rongji365.com/Storage/PrdImage/ProductImage/102/10240002001/p180/130622573396734143.jpg" alt=""></a></div>
                            <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                            <p class="price">现价:￥11.00</p>
                        </li>
                        <li>
                            <div><a href=""><img src="http://dev.rongji365.com/Storage/PrdImage/ProductImage/102/10240002001/p180/130622573396734143.jpg" alt=""></a></div>
                            <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                            <p class="price">现价:￥11.00</p>
                        </li>
                        <li>
                            <div><a href=""><img src="http://dev.rongji365.com/Storage/PrdImage/ProductImage/102/10240002001/p180/130622573396734143.jpg" alt=""></a></div>
                            <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                            <p class="price">现价:￥11.00</p>
                        </li>
                        <li>
                            <div><a href=""><img src="http://dev.rongji365.com/Storage/PrdImage/ProductImage/102/10240002001/p180/130622573396734143.jpg" alt=""></a></div>
                            <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                            <p class="price">现价:￥11.00</p>
                        </li>
                    </ul>
                </dd>
            </dl>
            <dl class="details-side">
                <dt>最近浏览</dt>
                <dd class="no-items">暂无数据</dd>
                <dd>
                    <ul>
                        <li>
                            <div><a href=""><img src="http://dev.rongji365.com/Storage/PrdImage/ProductImage/102/10240002001/p180/130622573396734143.jpg" alt=""></a></div>
                            <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                            <p class="price">现价:￥11.00</p>
                        </li>
                        <li>
                            <div><a href=""><img src="http://dev.rongji365.com/Storage/PrdImage/ProductImage/102/10240002001/p180/130622573396734143.jpg" alt=""></a></div>
                            <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                            <p class="price">现价:￥11.00</p>
                        </li>
                        <li>
                            <div><a href=""><img src="http://dev.rongji365.com/Storage/PrdImage/ProductImage/102/10240002001/p180/130622573396734143.jpg" alt=""></a></div>
                            <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                            <p class="price">现价:￥11.00</p>
                        </li>
                        <li>
                            <div><a href=""><img src="http://dev.rongji365.com/Storage/PrdImage/ProductImage/102/10240002001/p180/130622573396734143.jpg" alt=""></a></div>
                            <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                            <p class="price">现价:￥11.00</p>
                        </li>
                        <li>
                            <div><a href=""><img src="http://dev.rongji365.com/Storage/PrdImage/ProductImage/102/10240002001/p180/130622573396734143.jpg" alt=""></a></div>
                            <a href="">雪神正品三七细粉云南特产文山州田七超微粉12头打<span>云南特产文山州田七超微粉</span></a>
                            <p class="price">现价:￥11.00</p>
                        </li>
                    </ul>
                </dd>
            </dl>*@
    </div>

    <div class="col-right details-right">
        <i class="cat-icon xian">应季鲜品</i>
        <div class="details-wrapper">
            <!---->
            <div id="product-intro">
                <div id="previews">
                    <span class="jqzoom">
                        <img jqimg="" src="" alt="@Model.Product.Title">
                    </span>
                    <!--缩图开始-->
                    <div class="spec-scroll">
                        <i class="fa fa-chevron-right next"></i>
                        <i class="fa fa-chevron-left prev"></i>
                        <div class="items">
                            <ul id="galleryThums">
                                @foreach (var item in @Model.Product.FullImageList)
                                {
                                    <li class="thumnails_item">
                                        <img alt="@Model.Product.Title" bimg="@FormatProduct.FormatProductImageUrl(ImageType.Size800, Model.Product.ProductId, item.ImageName)"
                                             src="@FormatProduct.FormatProductImageUrl(ImageType.Size350, Model.Product.ProductId, item.ImageName)" onmousemove="Preview(this);">
                                    </li>
                                }
                            </ul>
                        </div>
                    </div>
                    <!--缩图结束-->
                </div>
                <code class="product_code">商品编号: @Model.Product.ProductId</code>
                <div class="product_name">
                    <h2>@Model.Product.Title</h2>
                    <h3>@Model.Product.LineDescription</h3>
                </div>
                <div class="rj_meta" id="groupPropertyPanel"></div>
                @*<div class="preferential"><i>满赠</i>买8斤乾面即赠 300g湘鄂情辣椒酱 一瓶 赠完即止</div>*@
                <div class="rj_sku">
                    <div class="sku_price">
                        @if (Model.Product.PromotionType == Kevin.Shop.Business.Products.Components.ProductPromoType.PromitonNow)
                        {
                            <span class="icon_limit_time">限时供应 <i class="fa fa-clock-o"></i></span>
                        }
                        else
                        {
                            <span class="icon_limit_time">限时供应 <i class="fa fa-clock-o"></i></span>
                        }

                        <label class="pr1">鲜享价：<b>￥@Model.Product.UnitPrice</b></label>
                        @if (Model.Product.MarketPrice > 0)
                        {
                            <label class="pr2">市场价：<del>￥@Model.Product.MarketPrice</del></label>
                        }
                    </div>
                    <div class="sku_counter">
                        <div class="choose_counter">
                            <dl>
                                <dt>数量:</dt>
                                <dd>
                                    <i class="fa fa-minus" id="pndbtnReduce"></i>
                                    <input id="quantity" type="text" value="1">
                                    <i class="fa fa-plus" id="pndbtnAdd"></i>
                                </dd>
                            </dl>
                        </div>
                        @if (Model.Product.TotalInventory > 0)
                        {
                            if (Model.Product.Active)
                            {
                                <div id="addToBag">
                                    <i class="mybag"></i>
                                    <span class="button">加入购物篮</span>
                                    <span id="addToBagTips"></span>
                                </div>
                            }
                            else
                            {
                                <div id="NoAddToBag">
                                    <i class="mybag"></i>
                                    <span class="button">商品已下架</span>
                                </div>
                            }
                        }
                        else
                        {
                            <div id="NoAddToBag">
                                <i class="mybag"></i>
                                <span class="button">暂时无货</span>
                            </div>
                        }
                        <ul>
                            <li id="addToFavorites"><i class="fa fa-heart"></i> 收藏商品</li>
                            @*<li id="reductionNotification"><i class="fa fa-arrow-down"></i> 降价通知</li>*@
                            <span id="addToFavoritesTips"></span>
                        </ul>
                    </div>
                </div>
                <div class="intro-miscs">
                    <span class="icon_yixuanwuliu">壹选物流 <i class="fa fa-truck"></i></span>
                    <span class="icon_yixuanwuliu">上门自提 <i class="fa fa-home"></i></span>
                    <p class="clearfix">@*西安市内，上午10:00前下单可在当天送达，上午10:00后下单第二天中午前送达。*@</p>
                    <div class="product_comments">
                        <dl>
                            <dt>评论:</dt>
                            <dd><span class="stars @Html.Raw("star" + @Model.Product.CommentStar)"></span></dd>
                            <span class="comments_counter">共 @Model.Product.ReviewCount 条评论</span>
                        </dl>
                        <dl>
                            <dt>分享:</dt>
                            <dd>
                                <!-- JiaThis Button BEGIN -->
                                <div class="jiathis_style_24x24">
                                    <a class="jiathis_button_qzone"></a>
                                    <a class="jiathis_button_tsina"></a>
                                    <a class="jiathis_button_tqq"></a>
                                    <a class="jiathis_button_weixin"></a>
                                    <a class="jiathis_button_renren"></a>
                                    <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
                                </div>
                                <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
                                <!-- JiaThis Button END -->
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>

            <div id="Tabs">
                <ul id="TabsHandler">
                    <li class="selected"><a href="#Tabs1">商品详情</a></li>
                    <li><a href="#Tabs2">商品属性</a></li>
                    <li><a href="#Tabs3" rel="ProductReviewPartial?productId=@Model.Product.ProductId">商品评价(@Model.Product.ReviewCount)</a></li>
                </ul>
                <div id="Tabs1" class="Tabs-Wrapper" style="display: block;">
                    @if (string.IsNullOrEmpty(Model.Product.Overview))
                    {

                        @Html.Raw("暂无商品详情")
                    }
                    else
                    {
                        @Html.Raw(@Model.Product.Overview)
                    }
                </div>
                <div id="Tabs2" class="Tabs-Wrapper productProperty" style="display: none;">
                    @Html.Raw(@Model.Product.DetailSpecification)
                </div>
                <div id="Tabs3" class="Tabs-Wrapper" style="display: none;"></div>
            </div>
            <!---->
        </div>
    </div>
</div>
<input type="hidden" value="@Model.Product.ProductId" id="productId" name="productId" />
<input type="hidden" value="@Model.Product.UnitPrice" id="unitPrice" name="unitPrice" />

@section footer
{
    <script src="~/Themes/RongJi/Style/plugins/jquery.jqzoom.js"></script>
    <script src="~/Themes/RongJi/Style/plugins/jquery-circliful/jquery.circliful.min.js"></script>
    <script src="~/Themes/RongJi/Style/base/js/details.gallery.js"></script>
    <script src="~/Themes/RongJi/Style/base/js/aTabs.js"></script>
    <script src="~/Themes/RongJi/Style/base/js/details.js"></script>

    <script>

        $(function () {
            var productId = $("#productId").val();
            var unitPrice = $("#unitPrice").val();
            /*---------------------得到分组属性--------------------*/
            KevinShop.Common.Ajax.Get("GetProductPropertyGroup?productId=" + productId,
                function (response) {
                    //没有数据
                    if (response.length <= 0) {
                        return;
                    }
                    var tempPropertyID = 0;
                    var $panel = $('#groupPropertyPanel');
                    var html = '';
                    $.each(response, function (key, value) {
                        if (tempPropertyID != value.PropertyCode) {
                            if (tempPropertyID !== 0) {
                                html += '</dl>';
                            }
                            tempPropertyID = value.PropertyCode;
                            //创建属性
                            html += '<dl><dt>' + value.PropertyName + ':</dt><dd><ul>';
                        }
                        //创建属性值
                        if (value.PropertyValue != null && value.PropertyValue != undefined && value.PropertyValue != "") {
                            html += '<li class=' + value.SelectCss + ' name=' + value.PropertyCode + ' onclick="changeProduct(this);">' + value.PropertyValue + '</li>';
                        }
                        else {
                            html += '<li class=' + value.SelectCss + ' name=' + value.PropertyCode + ' onclick="changeProduct(this);">' + value.UserInput + '</li>';
                        }
                    });
                    html += '</ul></dd><br class="clearfix"></dl>';
                    $panel.append(html);
                }
            );

            $("#addToFavorites").click(function () {
                AddFavority(productId, unitPrice);
            });

        });
        //根据属性选择一个商品,并重新跳转到一个商品详情页面
        function changeProduct(dd) {
            $('li[name="' + $(dd).attr('name') + '"]').each(function () {
                if ($(this).text() != dd.innerHTML) {
                    this.className = "unselected";
                }
            });
            dd.className = "selected";
            var selectPropertyString = '';
            $("#groupPropertyPanel .selected").each(function () {
                selectPropertyString += $(this).text() + ',';
            });

            var productId = $("#productId").val();
            KevinShop.Common.Ajax.Get("GetSelectPropertyProduct?productId=" + productId + "&selectProperty=" + escape(selectPropertyString),
                function (response) {
                    if (response != null && response != "") {
                        window.location.href = "/Product/ProductDetail?prd=" + response;
                    }
                    else {
                        KevinShop.MessageBox.Alert('该商品没有您选择的型号,请重新选择!');
                        window.location.href = "/Product/ProductDetail?prd=@Model.Product.ProductId";
                    }
                }
            );

        };

        var AddFavority = function ($productId, $unitPrice) {
            var $url = "AddFavority?productId=" + $productId + "&unitPrice=" + $unitPrice;
            var $result = $.ajax({
                url: $url,
                async: false
            }).responseText;
            $result = $.parseJSON($result);
            if ($result.Status == true && $result.ErrorMessage == null) {
                window.location.href = "../Customer/Login?ReturnUrl=" + this.window.location.href;
                return;
            }
            else if ($result.Status == true && $result.ErrorMessage == "ok") {
                $('#addToFavoritesTips').text('收藏成功').fadeIn().delay(500).fadeOut();
                //KevinShop.MessageBox.Success("收藏成功！");
                $("#addToFavorites i").addClass("red");
            } else if ($result.Status == false && $result.ErrorStatusCode == "404") {
                window.location.href = "../Customer/Login?ReturnUrl=" + $result.ErrorMessage;
            } else if ($result.ErrorMessage == "existsProduct") {
                //KevinShop.MessageBox.Warning("您已收藏过此商品！");
                $('#addToFavoritesTips').text('您已收藏过此商品').fadeIn().delay(1000).fadeOut();
            } else {
                //KevinShop.MessageBox.Warning($result.ErrorMessage);
                $('#addToFavoritesTips').text($result.ErrorMessage).fadeIn().delay(1000).fadeOut();
            }
        };
    </script>
}
